<template>
	<!-- <view class="content">
		<view class="list">
			<view class="list-ul">
				<Item v-for="item in list" :key="item.topic_id" :item="item" />
			</view>
			<view class="loading-tips">{{isLoading ? '数据加载中...' : (loadOver ? '没有更多数据' : '滑动加载更多数据')}}</view>
		</view>
	</view> -->
	<view class="category">
		<scroll-view class="cate-left" :scroll-y="true">
			<view class="cate-litem" :class="{active: index === cateIndex}" v-for="(item, index) in cateList" @click="selectCate(item.id, index)">{{item.name}}</view>
		</scroll-view>
		<scroll-view class="cate-right" :scroll-y="true" @scrolltolower="loadMoreCateData">
			<Item v-for="item in cateDataList" :key="item.topic_id" :data="item" :window-width="windowWidth" />
			<view class="loading-tips">{{cateDataLoading ? '数据加载中...' : (cateDataLoadOver ? '没有更多数据' : '滑动加载更多数据')}}</view>
		</scroll-view>
	</view>
</template>

<script>
	import config from '../../src/config/api.config.js';
	import utils from '../../src/utils/utils.js';
	import userCheck from '../../src/utils/user.js';
	import request from '../../src/utils/request.js';
	import Item from './item.vue';
	export default {
		data() {
			return {
				windowWidth: 0, // 窗口大小
				parentOpenid:'',//进入页面获取是否链接带有其他人的openid
				openid:'',
				title:'',
				timer: null,
				cateIndex: 0, // 左侧索引
				cateId: '', // 对应索引的id
				cateList: [], // 左侧分类列表
				cateDataList: [], // 右侧数据
				cateDataPage: 1, // 右侧数据页码
				cateDataLoading: true, // 右侧数据是否加载中
				cateDataLoadOver: false, // 右侧数据是否加载完
			}
		},
		onLoad(options) {
			const that = this;
			this.title = options.title || '随心随意测';
			this.parentOpenid = options.parentOpenid != undefined ?options.parentOpenid:'';
			// uni.setNavigationBarTitle({
			// 	title: this.title
			// });
			
			// 获取窗口大小适配图片
			uni.getSystemInfo({
				success: (r) => {
					this.windowWidth = r.windowWidth;
				}
			})
			
			/**
			 * 统一处理页面获取用户openid操作
			 * @param {Object} openid
			 */
			userCheck.checkSession(function(openid){
				that.openid = openid
				/**
				 * 处理本页面的逻辑
				 */
				that.timer = setTimeout(() => {
					if (typeof options.id !== 'undefined') {
						that.cateId = options.id;
					}
					that.getCate();
				}, 500)
			},that.parentOpenid)
			
		},
		onUnload() {
			this.timer && clearTimeout(this.timer);
		},
		methods: {
			/**
			 * 获取左侧分类
			 */
			async getCate() {
				const r = await request({
					url: `${config.API}api/topic/cate/list`
				});
				
				if(r.error_code === 0) {
					this.cateList = r.data;
					if (r.data.length > 0) {
						if (typeof this.cateId !== 'undefined') {
							r.data.forEach((v, k) => {
								if (v.id == this.cateId) {
									this.cateIndex = k;
								}
							});
							this.getCateData(this.cateId, this.cateIndex);
						} else {
							this.getCateData(r.data[0].id, 0);
							this.cateId = r.data[0].id;
						}
						
					}
				}
			},
			/**
			 * 左侧分类选择
			 * @param {number} id 分类id
			 * @param {number} index 索引
			 */
			async selectCate(id, index) {
				if (this.cateIndex === index) return;
				this.cateIndex = index;
				this.cateId = id;
				this.resetCateList();
				this.getCateData(id, index);
			},
			/**
			 * 重置右侧列表
			 */
			resetCateList() {
				this.cateDataList = [];
				this.cateDataPage = 1;
				this.cateDataLoading = true;
				this.cateDataLoadOver = false;
			},
			/**
			 * 获取对应分类列表
			 * @param {number} id 分类id
			 * @param {number} index 加载数据时对应左侧哪一项，防止快速切换导致数据错乱
			 */
			async getCateData(id, index) {
				const r = await request({
					url: `${config.API}api/topic/cateSearch?cateId=${id}&page=${this.cateDataPage}`
				});
				this.cateDataLoading = false;
				if (r.error_code === 0) {
					if (index !== this.cateIndex) return;
					this.cateDataList = [...this.cateDataList, ...r.data.data];
					if (r.data.current_page >= r.data.last_page) this.cateDataLoadOver = true;
				}
			},
			/**
			 * 加载更多右侧数据
			 */
			loadMoreCateData() {
				if (this.cateDataLoading || this.cateDataLoadOver) return;
				this.cateDataLoading = true;
				this.timer && clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.cateDataPage ++;
					this.getCateData(this.cateId, this.cateIndex);
				}, 500);
			}
			
		},
		components: {
			Item
		},
		onShareAppMessage(r) {
			let _path = '/pages/index/index?parentOpenid='+this.openid;
			return {
				title: "心理测试、趣味测试",
				path: _path, //带上当前用户的openid，分销绑定关系
			}
		}
	}
</script>

<style lang="scss">
	$white: #fff;
	page {
		background-color: $white !important;
	}
</style>

<style lang="scss" scoped>
	$black: #000;
	$white: #fff;
	$color9: #999;
	.list {
		margin: 30rpx 30rpx;
		.list-title {
			padding: 20rpx 0 24rpx 0;
			text {
				font-size: 44rpx;
				color: $black;
			}
		}
	}
	.loading-tips {
		font-size: 24rpx;
		color: $color9;
		padding: 20rpx 0;
		text-align: center;
	}
	.category {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		height: 100%;
		.cate-left {
			background-color: #f5f6f7;
			height: 100%;
			width: 20%;
		}
		.cate-litem {
			padding: 30rpx 0;
			font-size: 28rpx;
			text-align: center;
			color: #6688aa;
			border-left: 6px solid #f5f6f7;
			padding-right: 6px;
			&.active {
				background-color: $white;
				border-color: #007AFF;
			}
		}
		.cate-right {
			flex: 1;
			min-width: 1px;
		}
	}
</style>
